<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" style="margin-top: -50px" width="40%" :before-close="cancel">
      <el-form :model="form" ref="form" :rules="formRules" size="small">
        <el-form-item label="所属品类" label-width="100px" prop="pid">
          <el-select v-model="form.pid" placeholder="请选择设备类型" style="width: 100%">
            <el-option v-for="item in typeList"
                       :label="item.typeName"
                       :value="item.id"
                       :disabled="!item.status"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地图标示" label-width="100px">
          <!-- 随着鼠标的滚动缩放 -->
          <baidu-map class="bm-view"
                     :center="center"
                     :zoom="zoom"
                     :scroll-wheel-zoom="true"
                     @ready="createMap">
            <!-- 地区检索 keyword和搜索输入框的v-model值相同 -->
            <bm-local-search :keyword="searchAddress" :auto-viewport="true" style="display: none;"></bm-local-search>
            <!-- 标记 -->
            <bm-marker :position="{lng: form.longitude, lat: form.latitude}"/>
          </baidu-map>
          <!-- 搜索输入框 -->
          <el-input v-model="searchAddress" placeholder="搜索地点"
                    style="margin-left: 10px;width: 200px;position: absolute;top: 10%;opacity: 0.9"
                    prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" label-width="100px" prop="productName">
          <el-input v-model="form.address" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="产品名称" label-width="100px" prop="productName">
          <el-input v-model="form.productName" autocomplete="off" placeholder="请输入产品名称"></el-input>
        </el-form-item>
        <el-form-item label="产品ID" label-width="100px" prop="productNo">
          <el-input v-model="form.productNo" autocomplete="off" placeholder="产品ID"></el-input>
        </el-form-item>
        <el-form-item label="消息协议" label-width="100px" prop="messageProtocol">
          <el-input v-model="form.messageProtocol" autocomplete="off" placeholder="请输入消息协议"></el-input>
        </el-form-item>
        <el-form-item label="产品状态" label-width="100px" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">运行中</el-radio>
            <el-radio :label="2">停用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="链接协议" label-width="100px" prop="linkProtocol">
          <el-input v-model="form.linkProtocol" autocomplete="off" placeholder="请输入链接协议"></el-input>
        </el-form-item>
        <el-form-item label="所属机构" label-width="100px" prop="affiliatedInstitution">
          <el-input v-model="form.affiliatedInstitution" autocomplete="off" placeholder="请输入所属机构"></el-input>
        </el-form-item>
        <el-form-item label="设备类型" label-width="100px" prop="deviceType">
          <el-input v-model="form.deviceType" autocomplete="off" placeholder="请输入设备类型"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: -30px">
        <el-button size="small" @click="cancel">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {updateProduct} from "@/api/detail";

export default {
  name: 'DetailDialog',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default() {
        return {
            address: "",
            longitude: '',
            latitude: '',
            province: '',
            city: '',
            area: '',
            pid: null,
            productName: '',
            productNo: '',
            messageProtocol: '',
            status: 1,
            linkProtocol: '',
            affiliatedInstitution: '',
            deviceType: '',
        }
      }
    },
    typeList: {
      type: Array,
      default() {
        return []
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formRules: {},
      center: {lng: 0, lat: 0},
      zoom: 15,
      searchAddress: '',
    }
  },
  methods: {
    createMap ({BMap, map}) {
      // 显示的中心点坐标
      if (this.form.longitude == "" && this.form.latitude == "") {
        this.center.lng = 113.657804
        this.center.lat = 34.727476
        this.form.longitude = 113.657804
        this.form.latitude = 34.727476
      } else {
        this.center.lng = this.form.longitude
        this.center.lat = this.form.latitude
        this.form.longitude = this.center.lng
        this.form.latitude = this.center.lat
      }
      // 缩放等级
      this.zoom = 15
      let geolocation = new BMap.Geolocation()
      // 地址解析对象, 用于获取坐标点的省市区等信息
      this.geoc = new BMap.Geocoder()
      const _this = this
      // 添加点击事件
      map.addEventListener('click', function (e) {
        // 获取点击位置的经纬度
        _this.form.longitude = e.point.lng
        _this.form.latitude = e.point.lat

        _this.geoc.getLocation(e.point, function (rs) {
          var addComp = rs.addressComponents
          // 获取省市区街道等信息
          _this.form.address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
        })
      })
    },
    onSubmit() {
      this.$emit("onSubmit");
    },
    cancel() {
      this.$emit("closeDialog");
    },
  }
}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>
